<template>
    <div class="search">
        <div class="search">
            <div class="search-logo">
                <img src="../static/images/logo.webp" alt="" srcset="" />
            </div>
            <div class="search-inp">
                <form action="/">
                    <van-search v-model="value" background="#2b4c7e" show-action placeholder="请输入搜索关键词" @search="onSearch"
                        @cancel="onCancel" />
                </form>
            </div>
        </div>

        <van-nav-bar title="搜索详情" left-text="返回" left-arrow @click-left="onClickLeft" />


        <div class="title">
            <h3>关键词</h3>
        </div>

        <div class="search-list" v-if="isShow">
            <ul>
                <li v-for="item in searchlist.data">
                    <div class="search-img">
                        <img :src="item.img" alt="">
                        <h3>{{ item.name }}</h3>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<style lang="scss" >
@import url(../static/style/reset.css);
@import "../static/style/variable.scss";

.search {

    width: 100%;
    height: 1000px;

    background-color: #fff;

    .search {
        display: flex;
        height: 3.4rem;
        width: 100%;
        overflow: hidden;

        .search-inp {
            width: 85%;

            .van-search__content {
                border-radius: 20px;
            }

            .van-search--show-action {
                padding-right: .5333rem
            }

            .van-search__action {
                color: #f8f8f8;
            }
        }

        .search-logo {
            width: 3.5rem;
            height: 4rem;
            background-color: $backGroundColor;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .title {
        margin-top: .5333rem;

        h3 {
            padding-left: .4rem;
            width: 6rem;
            border-left: 3px solid $backGroundColor;

        }
    }

    .search-list {
        ul {
            width: 100%;
            display: flex;
            flex-wrap: wrap;

            li {
                width: 8rem;
                height: 8rem;
                margin: 1.3333rem 0 3rem 0;
                margin-left: 2.5rem;

                .search-img {
                    width: 100%;
                    height: 100%;
                    text-align: center;

                    img {
                        // width: 100%;
                        height: 100%;
                        border-radius: 100%;
                        box-shadow: 0 3px 3px 1px rgba(0, 0, 0, 0.12);
                    }
                }

                h3 {
                    width: 100%;
                    margin-top: 1rem;
                    font-size: 17px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
                    white-space: nowrap;
                }
            }
        }
    }
}
</style>
<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router';
import { getSearchList } from '../request'
import { reactive, ref } from 'vue';
import { showToast } from 'vant';
import { showSuccessToast, showFailToast, showLoadingToast } from 'vant';
let isShow = ref(true);
const route = useRoute();
let val = route.query.searchName;
console.log(val);

let searchlist: any = reactive({
    data: []
})
let value = ref('');
const onCancel = () => showToast('取消');
const onSearch = (val: any) => {
    showToast(val);
    view(val)
};
let none = ref('')
const view = (val: any) => {
    showLoadingToast({
        message: '加载中...',
        forbidClick: true,
    });
    getSearchList({ con_name: val }).then((content: any) => {
        console.log(content);
        let { result } = content;
        if (result.length == 0) {
            console.log(content.msg);
            none.value = content.msg;
            showFailToast(none.value);
            isShow.value = false;
            value.value = ''
        } else {
            let hot = result.map((item: any) => {
                let obj: any = {};
                obj.id = item.con_id;
                obj.name = item.con_name;
                obj.img = item.con_img;
                return obj
            })
            searchlist.data = hot;
            isShow.value = true;
            value.value = ''
        }

    }).catch(error => {
        console.log(error);
    })
}

view(val)

const onClickLeft = () => history.back();
</script>